<template>
  <v-container grid-list-xs>
    <v-layout row justify-space-between align-center>
      <div class="title text--primary">{{$t('announcement.editAnn')}}</div>
      <v-btn @click="handlePublish">{{$t('announcement.publish')}}</v-btn>
    </v-layout>

    <v-divider></v-divider>

    <v-layout align-center>
      <v-flex xs4 sm1 md1>
        <div class="subheading">{{$t('announcement.annCatalogue')}}</div>
      </v-flex>
      <v-flex xs8 sm4 md3>
        <v-select
          :items="annTags"
          v-model="announcement.announcement_tag"
          item-text="name"
          item-value="_id"
        ></v-select>
      </v-flex>
    </v-layout>

    <v-layout row wrap>
      <v-flex xs4 sm1 md1>
        <div class="subheading">{{$t('announcement.annIcon')}}</div>
      </v-flex>
      <v-flex xs8 sm11 md11 lg10>
        <avatar-upload :avatar.sync="announcement.icon" :edge="60"></avatar-upload>
      </v-flex>
    </v-layout>

    <v-layout row wrap class="mb-3">
      <v-flex xs12 sm1 md1>
        <div class="subheading">{{$t('announcement.annTitle')}}</div>
      </v-flex>
      <v-flex xs12 sm11 md11 lg10>
        <v-text-field solo v-model="announcement.title"></v-text-field>
      </v-flex>
    </v-layout>

    <v-layout row wrap class="mb-3">
      <v-flex xs12 sm1 md1>
        <div class="subheading">{{$t('announcement.annSummary')}}</div>
      </v-flex>
      <v-flex xs12 sm11 md11 lg10>
        <v-text-field solo multi-line v-model="announcement.summary"></v-text-field>
      </v-flex>
    </v-layout>

    <v-layout row wrap>
      <v-flex xs12 justify-space-between style="display: flex">
        <div class="subheading">{{$t('announcement.annContent')}}</div>
      </v-flex>
      <v-flex xs12>
        <quill-editor :options="editorOption" v-model="announcement.content"></quill-editor>
      </v-flex>
    </v-layout>

  </v-container>
</template>

<script>
import { fetchOnlyTags } from '@/api/announcement'
import AvatarUpload from '@/components/AvatarUpload'
import { quillEditor } from 'vue-quill-editor'
import { addAnnInTeam } from '@/api/announcement'

export default {
  components: { AvatarUpload, quillEditor },
  data: () => ({
    annTags: [],
    announcement: {
      announcement_tag: '',
      icon: '',
      title: '',
      summary: '',
      content: ''
    },
    editorOption: {
      placeholder: '输入任何内容，支持html',
      modules: {
        toolbar: [
          [{ 'align': [] }],
          [{ 'direction': 'rtl' }],
          ['bold', 'italic', 'underline'],
          [{ 'color': [] }, { 'background': [] }],
          ['link', 'image'],
          ['blockquote', 'code-block'],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }]
        ]
      }
    }
  }),
  created() {
    fetchOnlyTags(this.$store.getters.team).then(res => {
      this.annTags = res.data.tags
    })
  },
  methods: {
    handlePublish() {
      if (!this.announcement.announcement_tag) {
        return this.$notify.warning('请选择一个分类')
      }
      if (!this.announcement.content || !this.announcement.title) {
        return this.$notify.warning('请选择填写标题和内容')
      }
      addAnnInTeam(this.announcement, this.$store.getters.team).then(res => {
        if (res.status === 200) {
          this.$notify.success('发布成功')
          this.$router.push({ name: 'announcement-index' })
        } else {
          this.$notify.error('发布失败')
        }
      })
    }
  }
}
</script>
